<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="所属单位">
              <a-select
                v-model="queryParam.subjectName"
                placeholder="请选择所属单位"
                :trigger-change="true"
              >
                <a-select-option v-for="(item, index) in positionList" :key="index" :value="item.tenantId">
                  {{ item.principalName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="用户名">
              <a-input placeholder="请输入用户名" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="电话">
                <a-input placeholder="请输入电话" v-model="queryParam.phone"></a-input>
                </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-model-item label="创建时间">
                  <a-range-picker v-model="createTime" date-format="YYYY-MM-DD" @change="onDateChange" />
                </a-form-model-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="updatePassword(record)">修改密码</a>
        </span>
      </a-table>
    </div>
    <tqpp-account-modal ref="modalForm" @ok="modalFormOk"></tqpp-account-modal>
    <user-password ref="userPassword"></user-password>
  </a-card>
</template>

<script>
  import UserPassword from '@/components/tools/UserPassword.vue'  
  import { getAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import TqppAccountModal from './modules/TqppAccountModal.vue'
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  export default {
    name: 'TxppServiceItemsList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JDictSelectTag,
      TqppAccountModal,
      UserPassword
    },
    data () {
      return {
        createTime:[],
        positionList:[],
        description: '服务项目表管理页面',
        // 表头
         columns: [
          {
            title: '编号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
                return parseInt(index) + 1
            },
          },
          {
            title:'所属单位',
            align:"center",
            dataIndex: 'subjectName_dictText'
          },
          {
            title:'用户名',
            align:"center",
            dataIndex: 'username'
          },
          {
            title:'职位',
            align:"center",
            dataIndex: 'post'
          },
          {
            title:'电话',
            align:"center",
            dataIndex: 'phone'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' },
          }
        ],
        isorter:{
          column: 'createTime',
        },
        url: {
          list: "/sys/user/userList",
        },
        dictOptions:{},
      }
    },
    mounted() {
        this.getTxppSubjectList()
    },
    computed: {
    },
    methods: {
        getTxppSubjectList() {
            getAction('/loquat/txppSubject/allList').then((res) => {
              res.result.map(item=>{
                item.tenantId = item.tenantId.toString()
              })
                this.positionList = res.result
            })
        },
        onDateChange: function (value, dateString) {
            this.queryParam.createTimeStart=dateString[0];
            this.queryParam.createTimeEnd=dateString[1];
        },
        updatePassword(record) {
          this.$refs.userPassword.show(record.username)
        },
        initDictConfig(){
        }
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
.table-page-search-wrapper{
/deep/ .ant-calendar-range-picker-input{
    font-size: 12px
  }
}
</style>